<template>
  <!-- tab基本信息表单  -->
  <el-scrollbar style="height: 100%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="200" class="form-input-m" inline-message>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="培养基代码" prop="code">
            <el-input v-model="formData.code" placeholder="请输入培养基代码" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="培养基名称" prop="name">
            <el-input v-model="formData.name" @change="autoInputCode" placeholder="请输入培养基名称" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="不打印标签" prop="isPrintLabel">
            <el-switch v-model="formData.isPrintLabel" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="血培养标志" prop="bloodFlag">
            <el-switch v-model="formData.bloodFlag" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="培养基条件" prop="condition">
            <el-input v-model="formData.condition" placeholder="请输入培养基条件" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="培养周期（小时）" prop="cycle">
            <el-input v-model="formData.cycle" placeholder="请输入培养周期（小时）"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="观察间隔（小时）" prop="obInterval">
            <el-input v-model="formData.obInterval" type="text" placeholder="请输入观察间隔"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="对应报告项目" prop="itemNa">
            <!-- <el-input v-model="formData.projectId" style="width:100%;"></el-input> -->
            <SelectDataList ref="employeeSelectRef" :url="'/lis/lab/item/findLabItemDictList'" :displayField="[
              { title: '编码', props: 'itemNo' }, //列标题
              { title: '名称', props: 'itemNa' },
              { title: '报告单元', props: 'rptGroupName' }
            ]" :placeholder="'点击选择报告项目'" :searchParam="{ code: 'speciesGroup' }" @selectDataRow="speciesGroupSelect"
              v-model="formData.itemNa" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="录入码" prop="inputCode">
            <el-input v-model="formData.inputCode" placeholder="请输入录入码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="序号" prop="orderNum">
            <el-input v-model="formData.orderNum" placeholder="请输入序号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" style="width: 650px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="容器条码前缀(多个用，隔开)" prop="containerBarcodeHead">
            <el-input v-model="formData.containerBarcodeHead" clearable type="textarea" style="width: 650px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="容器条码长度(多个用，隔开)" prop="containerBarcodeLength">
            <el-input v-model="formData.containerBarcodeLength" placeholder="请输入备注" type="textarea" style="width: 650px"
              clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="自动开窗扫描容器号码" prop="autoWindowScan">
            <el-switch v-model="formData.autoWindowScan" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认批号" prop="batch">
            <el-input v-model="formData.batch" placeholder="请输入默认批号" clearable></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="默认有效期" prop="validityPeriod">
            <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formData.validityPeriod" type="date"
              placeholder="选择有效期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="对应采集部位" prop="collectionSite">
            <el-input v-model="formData.collectionSite" type="text" placeholder="请输入对应采集部位" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="血培养瓶重量(克)	" prop="weight">
            <el-input v-model="formData.weight" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最小采集量(ml)" prop="minCollection">
            <el-input v-model="formData.minCollection" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="培养基类型" prop="mediumType">
            <el-select v-model="formData.mediumType" placeholder="请选择培养基类型">
              <el-option :label="'培养基'" :value="'1'"></el-option>
              <el-option :label="'培养瓶'" :value="'2'"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="培养基颜色" prop="mediumColor">
            <el-color-picker v-model="formData.mediumColor"></el-color-picker>
            <el-tag class="margin-left-xs" :style="{ background: formData.mediumColor }">{{ formData.mediumColor
            }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标签份数" prop="tagsNum">
            <el-input v-model="formData.tagsNum" placeholder="请输入标签份数" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="培养瓶名称" prop="cultureBottle">
            <el-input v-model="formData.cultureBottle" placeholder="请输入培养瓶名称" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="培养基样式标签" prop="mediumTag">
            <!-- <el-input v-model="formData.mediumTag" clearable style="width: 100%;"></el-input> -->
            <vxe-select v-model="formData.mediumTag" placeholder="请选择报表模板">
              <vxe-option v-for="(item, index) in reportTemplateList" :key="index" :label="item.name"
                :value="item.id"></vxe-option>
            </vxe-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item>
            <!-- <el-button type="text" class="button-blue" @click="openEditExtraProperties"
              >配置扩展属性</el-button
            >-->
            <el-button type="primary" @click="saveForm">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 配置扩展属性弹框 -->
    <EditExtraProperties ref="EditExtraPropertiesRef" />
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType, onMounted } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import { funBdsJsResult } from '../../../utils/Expression'; //函数公式
import VxePulldownSelection from '../../../components/VxePulldownSelection.vue'; //引用下拉框组件
import EditExtraProperties from '../../../components/EditExtraProperties.vue'; //配置扩展属性弹框组件
import SelectDataList from '../../../components/SelectDataList.vue';
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
const reportTemplateList = reactive([]); //报表模板列表

const formRef = ref(); //表单ref标记

// 表单绑定的数据
let formData = reactive({
  id: '' /*主键*/,
  code: '' /*培养基编码*/,
  name: '' /*培养基代号*/,
  condition: '' /*培养基名称*/,
  cycle: '' /*培养基英文编码*/,
  obInterval: '' /*培养基英文名称*/,
  itemNo: '' /*输入码*/,
  itemNa: '',
  rptGroup: '',
  remark: '' /*是否常见*/,
  inputCode: '' /*标准名称*/,
  orderNum: null /*血清型分组*/,
  containerBarcodeHead: '' /*种分组*/,
  containerBarcodeLength: '' /*属编号*/,
  batch: '' /*属分组*/,
  validityPeriod: '' /*科编码*/,
  collectionSite: '' /*门编码*/,
  weight: '' /*是否厌氧菌*/,
  minCollection: '' /*培养基类型*/,
  isPrintLabel: false /*备注*/,
  bloodFlag: false /*组织机构id*/,
  autoWindowScan: false,
  orgId: '',
  mediumType: '',/**培养基类型  1、培养基  2、培养瓶 */
  mediumColor: '',/**培养基颜色 */
  mediumTag: '',/**培养基样式标签 */
  tagsNum: 1, /*标签分数*/
  cultureBottle:''/*培养瓶*/
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  code: [{ required: true, message: '请输入编码' }],
  name: [{ required: true, message: '请输入名称' }]
});

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref
// const collapseStatus = ref(false);

defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
    // for (const key in nval) {
    //   if (Object.prototype.hasOwnProperty.call(nval, key)) {
    //     const element = nval[key];
    //     formData[key] = element;
    //   }
    // }
  },
  {
    deep: true,
    immediate: true
  }
);

// watch(
//   () => formData.name,
//   (n, o) => {
//     formData.ma = funBdsJsResult('firstPinYinFun', n);
//   },
//   { deep: true }
// );

// 方法定义区 =============

onMounted(() => {
  getDictMeasureList();
  // getModulePointMap();
});

//获取报表模板列表
function getDictMeasureList() {
  reportTemplateList.length = 0;
  const url = '/api/pubReport/getReportList';
  proxy.$http
    .get(url, { params: { pageIndex: 1, pageSize: 50, type: 0, dictDetailCode: 'pointsCode', dictDetailValue: '006' } })
    .then((res: any) => {
      reportTemplateList.push(...res.data.reportList.records);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function addNew() {
  console.log('新增');

  clearFormData(); // 清空表单
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 自动生成助记符
function autoInputCode() {
  formData.inputCode = funBdsJsResult('firstPinYinFun', formData.name);
}

// 清空表单
function clearFormData() {
  formData.id = '';
  formData.code = '';
  formData.name = '';
  formData.condition = '';
  formData.cycle = '';
  formData.obInterval = '';
  formData.itemNo = '';
  formData.itemNa = '';
  formData.rptGroup = '';
  formData.remark = '';
  formData.inputCode = '';
  formData.orderNum = null;
  formData.containerBarcodeHead = '';
  formData.containerBarcodeLength = '';
  formData.batch = '';
  formData.validityPeriod = '';
  formData.collectionSite = '';
  formData.weight = '';
  formData.minCollection = '';
  formData.isPrintLabel = false;
  formData.bloodFlag = false;
  formData.autoWindowScan = false;
  formData.orgId = '';
  formData.tagsNum = 1;
}

// 保存分管类别
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    let url = '';
    // 判断添加和编辑接口
    if (IsEmpty(formData.id)) {
      url = '/api/bac/bac-culture-medium/addBacCultureMedium';
    } else {
      url = '/api/bac/bac-culture-medium/updateBacCultureMedium';
    }
    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 200) {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改培养基成功', VxeNotifyType.success);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增培养基成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改培养基失败', VxeNotifyType.error);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增培养基失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage('保存分管类别异常', VxeNotifyType.error);
        // if (callback) {
        //   callback(false);
        // }
      });
  });
}
function speciesGroupSelect(row) {
  formData.itemNo = row.itemNo;
  formData.itemNa = row.itemNa;
  formData.rptGroup = row.rptGroup;
}
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar__view) {
  height: 100%;

  .el-form {
    padding: 15px;
    height: calc(100% - 30px);
  }
}
</style>
